<template>
	<view>
		<!-- 主图和简介 -->
		<course-header></course-header>
		<view class="course-details" :style="'height:' + pageHeight + 'px'">
			<!-- 标签选项卡 -->
			<tab-bar :tabs="tabs" v-model="tabIndex"></tab-bar>
			<!-- 
		 duration 滑动动画时长
		 current 当前所在滑块的 index
		 @change 当 current 改变时会触发
		 circular 到末尾后重新回到开头
		 -->
			<swiper class="swiper-box" circular :duration="300" :current="tabIndex" @change="changeTab">
				<swiper-item v-for="(item, index) in tabs" :key="index">
					<scroll-view id="scroll-box" class="scroll-box" :scroll-y="enableScroll" upper-threshold="0" @scrolltoupper="scrolltoupper">
						<view class="details-info">
							<course-info v-if="index == 0"></course-info>
							<course-dir v-if="index == 1"></course-dir>
							<course-comment v-if="index == 2"></course-comment>
							<course-group v-if="index == 3"></course-group>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
import courseHeader from './components/course-header.vue';
import tabBar from '@/components/common/tab-bar.vue';
import tabs from '@/config/course-details-tabs.js';
import courseInfo from './components/course-info.vue';
import courseDir from './components/course-dir.vue';
import courseComment from './components/course-comment.vue';
import courseGroup from './components/course-group.vue';
import bottomBtn from './components/bottom-ben.vue';
export default {
	components: { courseHeader, tabBar, courseInfo, courseDir, courseComment, courseGroup, bottomBtn },

	data() {
		return {
			tabs, // 标签导航
			tabIndex: 0, // 当前所在标签
			enableScroll: false, // 是否允许滚动
			statusNavHeight: 0, // 状态栏+导航高度
			pageHeight: 300 // 详情内容区域高度
		};
	},

	onLoad() {
		//获取当前页面视口高度
		this.getPageHeight();
	},

	methods: {
		onReachBottom() {
			// 详情区域可滚动
			this.enableScroll = true;
		},
		// 左右切换时触发
		changeTab(e) {
			this.tabIndex = e.detail.current;
		},

		// scroll-view 滚动到顶部时触发（methods中定义）
		scrolltoupper() {
			// 页面区域也回到顶部
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 150
			});
			// 滚动到页面顶部，禁用详情滚动
			this.enableScroll = false;
		},

		//获取当前页面视口高度
		getPageHeight() {
			const res = uni.getSystemInfoSync();
			// 平台
			const system = res.platform;
			// 状态栏高度
			const statusBarHeight = res.statusBarHeight;
			// 状态栏+导航高度
			if (system === 'android') {
				this.statusNavHeight = 48 + statusBarHeight;
			} else if (system === 'ios') {
				this.statusNavHeight = 44 + statusBarHeight;
			}
			// console.log('statusNavHeight', this.statusNavHeight)

			// screenHeight 是整合手机屏幕的高度，
			// windowHeight 是webview（不包括手机通知栏、小程序标题栏和tabBar）的页面高度；
			// 如果导航是渐变效果, 上面两个值是一样的，需要自己计算，减去后面显示出来的状态导
			// 页面视口高度
			this.pageHeight = res.windowHeight - this.statusNavHeight;
		}
	}
};
</script>

<style lang="scss">
.course-details {
	overflow: hidden;
	.swiper-box,
	.scroll-box {
		height: 100%;
	}
	.details-info {
		// 被隐藏的80rpx（标签选项卡高度）
		padding-bottom: 180rpx;
	}
}
</style>
